let speedOption = {
    animationDurationUpdate: 300,
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 30,
            splitNumber: 6,
            progress: {
                show: true,
                width: 3,
                itemStyle: {
                    color: '#ffc943'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff'
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 3,
                length: '90%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: "{value}"
            },
            data: [{
                title: {
                    color: '#eee',
                    offsetCenter: [0, '120%'],
                    fontSize: 14,
                    textShadowColor: 'rgba(0, 0, 0, 0.7)',
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 2,
                },

                name: '航速',
                value: 12,
            }]
        }
    ]
};

let rudderAngleOption = {
    animationDurationUpdate: 300,
    series: [
        {
            type: 'gauge',
            min: -45,
            max: 45,
            // progress: {
            //     show: true,
            //     width: 5,
            //     itemStyle: {
            //         color: 'ffc943'
            //     }
            // },
            splitNumber: 6,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff'
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 3,
                length: '90%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: "{value}°"
            },
            data: [{
                title: {
                    color: '#eee',
                    offsetCenter: [0, '120%'],
                    fontSize: 14,
                    textShadowColor: 'rgba(0, 0, 0, 0.7)',
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 2,
                },

                name: '舵角',
                value: 12,
            }]
        }
    ]
};

let courseOption = {
    animationDurationUpdate: 300,
    grid: {
        top: '0%',
        bottom: '10%',
        left: '10%',
        right: '10%',
    },
    series: [
        {
            name: 'course',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            splitNumber: 8, // 18,
            clockwise: true,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value === 360) return;
                    return value;
                }
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 3,
                length: '90%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: "{value}°"
            },
            data: [
                {
                    title: {
                        color: '#fff',
                        offsetCenter: [0, '120%'],
                        fontSize: 14
                    },
                    value: 0,
                    name: '航向'
                }
            ]
        },
    ]
};

let headingUpOption = {
    animationDurationUpdate: 300,
    series: [
        {
            name: 'heading',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            splitNumber: 8, // 18,
            clockwise: true,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value === 360) return;
                    return value;
                }
            },
            pointer: {
                icon: 'path://M-26.64,109.99v-0.48l-3.92,-2.61c0,0 -1.03,-0.65 -1.26,-2.31c-0.23,-1.66 0.75,-3.11 0.75,-3.11l4.02,-5.99h0.4l-0.01,-43.01h-2.34c0,0 -1.43,-0.43 -2.18,-2.06c-0.75,-1.63 -0.82,-3.49 -0.82,-5.66c0,-2.17 0,-4.46 0.82,-6.09c0.67,-1.33 2.18,-1.63 2.18,-1.63h2.33v-3.33c0,0 -0.3,-16.14 1.82,-22.88c2.12,-6.74 6.1,-10.83 8.91,-10.83c2.82,0 6.57,4.16 8.67,10.83c2.16,6.87 1.82,22.85 1.82,22.85v3.36h2.45c0,0 1.51,0.3 2.18,1.63c0.82,1.63 0.82,3.92 0.82,6.09c0,2.17 -0.07,4.03 -0.82,5.66c-0.75,1.63 -2.18,2.06 -2.18,2.06h-2.44l0.03,43.01h0.46l4.02,5.99c0,0 0.98,1.45 0.75,3.11c-0.23,1.66 -1.26,2.31 -1.26,2.31l-3.96,2.64v0.42h-0.63l-0.07,0.04v-0.04l-19.8,0.03v0.01l-0.03,-0.01zM-5.44,50.35c0.37,0.59 1.14,0.67 1.14,0.67c0,0 2.18,-0.25 2.66,-1.63c0.48,-1.37 0.54,-2.62 0.55,-4.63c0,-2 -0.07,-3.6 -0.55,-4.98c-0.48,-1.37 -2.66,-1.37 -2.66,-1.37c0,0 -0.78,-0.03 -1.14,0.46zM-26.67,38.75c-0.39,-0.36 -1.03,-0.34 -1.03,-0.34c0,0 -2.18,0 -2.66,1.37c-0.48,1.38 -0.55,2.98 -0.55,4.98c0.01,2.01 0.07,3.26 0.55,4.63c0.48,1.38 2.66,1.63 2.66,1.63c0,0 0.64,-0.07 1.04,-0.53zM-30.04,102.49c0,0 -0.52,0.86 -0.52,1.52c0.01,0.66 0.09,1.11 0.52,1.44c1.03,0.8 2.47,1.66 2.47,1.66c0,0 0.59,0.36 0.92,0.36c0,0 0,0 0.01,0l-0.01,-9.23h-0.57zM-4.43,107.11c0,0 1.44,-0.86 2.47,-1.66c0.43,-0.33 0.51,-0.78 0.52,-1.44c0,-0.66 -0.52,-1.52 -0.52,-1.52l-2.82,-4.25h-0.63l0.01,9.23c0.02,0 0.03,0 0.05,0c0.33,0 0.92,-0.36 0.92,-0.36z',
                width: 35,
                length: '130%',
                offsetCenter: [0, '50%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: false,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: "{value}°"
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 0,
                    name: '水面艏向'
                }
            ]
        },
    ]
};
let headingDownOption = {
    animationDurationUpdate: 300,
    series: [
        {
            name: 'heading',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 360,
            splitNumber: 8, // 18,
            clockwise: true,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value === 360) return;
                    return value;
                }
            },
            pointer: {
                icon: 'path://M2.95,12.32c3.36,-2.61 28.44,-1.58 28.44,-1.58v8.48h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM2.95,22.78c3.36,-2.61 28.44,-1.59 28.44,-1.59v8.49h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM2.95,33.04c3.36,-2.61 28.44,-1.59 28.44,-1.59v8.49h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM2.95,49.81c3.36,-2.61 28.44,-1.58 28.44,-1.58v8.48h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM2.95,60.27c3.36,-2.61 28.44,-1.59 28.44,-1.59v8.49h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM2.95,70.53c3.36,-2.61 28.44,-1.59 28.44,-1.59v8.49h-30.68c-1.21,0 -1.12,-4.29 2.24,-6.9zM33.29,45.12c0,0.87 -0.28,2.16 -0.28,2.16c0,0 -0.01,23.75 0,31.43h0.38v2.24h0.37l0.19,4.66h0.18l0.1,12.69l-1.96,2.7l-1.87,-2.7l0.1,-12.69h0.18l0.19,-4.66h0.47v-2.24h0.37v-31.43c0,0 -0.28,-1.26 -0.28,-2.16c0,-0.9 0.28,-2.22 0.28,-2.22l0.09,-42.9l1.03,0l0.18,42.9c0,0 0.28,1.33 0.28,2.22zM33.2,19.21v-8.49c0,0 25.09,-1.02 28.44,1.59c3.36,2.61 3.46,6.9 2.24,6.9zM33.2,29.67v-8.49c0,0 25.09,-1.02 28.44,1.59c3.36,2.61 3.46,6.9 2.24,6.9zM33.2,39.93v-8.49c0,0 25.09,-1.03 28.44,1.59c3.36,2.61 3.46,6.9 2.24,6.9zM33.2,56.53v-8.49c0,0 25.09,-1.03 28.44,1.59c3.36,2.61 3.46,6.9 2.24,6.9zM33.2,66.98v-8.48c0,0 25.09,-1.03 28.44,1.58c3.36,2.61 3.46,6.9 2.24,6.9zM33.2,77.24v-8.48c0,0 25.09,-1.03 28.44,1.58c3.36,2.61 3.46,6.9 2.24,6.9z',
                width: 60,
                length: '130%',
                offsetCenter: [0, '70%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: false,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: "{value}°"
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 0,
                    name: '水下艏向'
                }
            ]
        },
    ]
};

let pitchUpOption = {
    animationDurationUpdate: 300,
    series: [
        {
            name: 'pitch',
            type: 'gauge',
            startAngle: 180,
            endAngle: -180,
            min: -180,
            max: 180,
            splitNumber: 18,
            clockwise: false,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value > 60 && value < 120) return
                    if (value < -60 && value > -120) return
                    if (value <= -120) return value + 180
                    if (value >= 120) return value - 180
                    return value
                }
            },
            pointer: {
                show: true,
                icon: 'path://M44.84 102L45.64 94.66C45.64 94.66 47.98 94.75 50.11 95.75C52.24 96.75 56.3 99.65 56.3 99.65C56.3 99.65 56.88 100.17 57.39 99.82C57.91 99.48 57.97 98.67 57.97 98.67C57.97 98.67 58.25 96.19 57.79 94.55C57.34 92.91 55.62 90.7 55.62 90.7C55.62 90.7 53.18 88.01 51.32 86.75C49.45 85.49 46.27 84.4 46.27 84.4C46.27 84.4 46.45 80.29 46.5 76.72C46.55 73.14 46.5 66.51 46.5 66.51L46.5 15.54C46.5 15.54 46.67 3.9 46.1 2.29C45.52 0.690002 42.94 0.400002 42.94 0.400002L40.13 0.230003C40.13 0.230003 40.13 0.0599976 39.85 0C39.85 0 39.33 0 39.1 0C38.99 0.339996 38.93 1.15 38.93 1.15L37.1 2.29L37.1 3.21L37.33 3.21L37.33 7.11L37.1 7.11L37.1 8.2L38.93 9.23L38.93 10.44L37.1 10.44L36.92 10.61C36.92 11.01 36.92 11.93 36.92 12.27L37.1 12.5L38.93 12.5L38.93 31.16L38.93 40.99L35.95 40.99C35.95 40.99 35.38 41.05 34.75 41.57C34.11 42.08 33.94 42.83 33.94 42.83L8.14 42.89L6.08 41.74L4.7 41.74L4.41 42.89L2.92 42.89L2.81 42.26L3.65802e-15 42.26L3.53188e-15 44.32L2.81 44.32L2.92 43.69L4.41 43.69L4.7 44.89L6.08 44.89L8.14 43.69L33.94 43.69C33.99 43.94 34.08 44.23 34.24 44.44C34.5 44.77 34.86 44.95 34.86 44.95L23.16 45.07L22.93 44.61C22.93 44.61 19.83 44.11 18.81 44.26C17.79 44.41 17.83 45.35 17.83 45.35C17.83 45.35 17.79 46.19 18.81 46.33C19.83 46.46 22.93 46.04 22.93 46.04L23.16 45.58L36.24 45.58L36.52 45.81L37.27 45.81L36.81 47.24L3.67 47.19C3.67 47.19 3.5 47.19 3.5 47.36C3.5 47.53 3.67 47.53 3.67 47.53L36.81 47.59L37.27 49.14L38.93 49.82L38.93 85.89L37.38 86.75L37.38 88.12L37.5 88.12L37.5 91.91L37.38 91.91L37.38 93.23L38.93 94.2L38.93 97.64L39.22 97.64L39.68 102L44.84 102Z',
                // icon: 'path://M35.79 100.92C35.79 100.92 36.38 102.21 37.55 101.86C38.73 101.27 38.73 99.75 38.73 99.75C38.73 99.75 44.01 103.27 48.7 101.51C53.39 99.75 52.22 93.88 52.22 93.88C52.22 93.88 51.28 86.96 49.87 82.73C48.47 78.51 45.18 72.76 45.18 72.76L45.18 58.67L45.18 51.05L45.77 51.05L48.11 51.05L49.87 49.29L49.87 48.11L48.11 46.35L46.94 45.77L45.77 45.77L45.18 45.77L45.18 42.83L45.77 42.25L46.94 42.25L46.94 41.66L47.53 41.66L47.53 40.49L46.94 40.49L46.94 39.9L45.77 39.31L45.18 39.31L45.18 36.96L45.77 36.38L45.77 33.44L45.18 32.86C45.18 32.86 44.71 15.84 43.42 9.39C42.13 2.93 38.73 0.589996 38.73 0.589996C38.73 0.589996 38.2 0 36.97 0C36.38 0 36.38 1.17 36.38 1.17L36.14 3.52L34.62 3.52L34.62 4.69L35.79 4.69L34.62 41.07L31.68 41.07L31.68 41.66L31.1 41.66L31.1 42.25L31.68 42.25L31.68 42.83L34.03 42.83L34.03 45.18L5.28 45.18L3.52 44.59L2.93 44.01L3.55086e-15 44.01L3.33533e-15 47.53L2.93 47.53L3.52 46.94L5.28 46.35L34.03 46.35L34.03 49.29L34.62 49.29L34.62 49.87L5.87 49.87L5.87 50.46L34.62 50.46L34.62 51.63L33.44 51.63L33.44 56.91L34.62 56.91L34.62 58.09L34.03 58.09L34.03 59.85L34.62 59.85L34.62 70.41L35.2 95.05L35.79 95.05L35.79 97.99L34.03 97.99L34.03 98.81L35.79 98.81L35.79 100.92Z',
                width: 70,
                length: '140%',
                offsetCenter: ['-20%', '70%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4,
                }
            },
            anchor: {
                show: false,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: value => {
                    let realValue = value;
                    if (value > 90) realValue -= 180;
                    if (value > 270) realValue = -180 + realValue;
                    return realValue + "°"
                }
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 20,
                    name: '水面俯仰角'
                }
            ]
        },
    ]
};
let pitchDownOption = {
    animationDurationUpdate: 300,
    series: [
        {
            name: 'pitch',
            type: 'gauge',
            startAngle: 180,
            endAngle: -180,
            min: -180,
            max: 180,
            splitNumber: 18,
            clockwise: false,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value > 60 && value < 120) return
                    if (value < -60 && value > -120) return
                    if (value <= -120) return value + 180
                    if (value >= 120) return value - 180
                    return value
                }
            },
            pointer: {
                show: true,
                icon: 'path://M1.53,44.7912v-12.54l-1.5,0.54c-0.13,-0.08 1.61,-1.81 1.61,-1.81v-8.18l-1.61,0.55c-0.16,-0.12 1.61,-1.82 1.61,-1.82v-8.08l-1.61,0.64c-0.16,-0.12 1.5,-1.92 1.5,-1.92l0.11,-6.44003c0,0 0.5,-2.73 3.51,-4.55c1.75,-1.04 3.88,-1.36 5.88,-1.09001c2.12,0.29 3.25,1.72 3.99,3.28001c0.76,1.56 0.39,4.62 0.39,4.62c0,0 -0.9,17.52003 -1.13,29.34003c-0.23,11.82 0,29.8 0,29.8c0,0 -0.84,4.06 -1.13,6.81c-0.27,2.73 -0.24,6.9 -0.24,6.9c0,0 6.15,3.42 8,5.26c1.84,1.86 1.25,4.1 1.25,4.1c0,0 -3.26,-1.45 -5.38,-2.01c-2.13,-0.56 -5.25,-0.9 -5.25,-0.9l-0.38,2.09h-0.99v2.53l-0.99,1.32c0.19,0.23 0.39,0.48 0.53,0.69c0.18,0.26 0.1,2.61 0,3.99c-0.1,1.39 -0.5,3.0898 -0.5,3.0898l-0.52,-7.0998l-1.03,1.38l-1.18,-1.77l-0.56,7.4898c0,0 -0.4,-1.6998 -0.5,-3.0898c-0.1,-1.38 -0.18,-3.73 0,-3.99c0.19,-0.28 0.48,-0.63 0.72,-0.91l-0.74,-1.1v-2.53h-1.24c0,0 -1.73,-6.9 -2.25,-11.81c-0.53,-4.92 -0.37,-12.81 -0.37,-12.81l-1.5,0.45c-0.26,-0.17 1.5,-1.81 1.5,-1.81v-8.08l-1.5,0.63c-0.26,-0.27 1.5,-1.82 1.5,-1.82v-8.17l-1.5,0.54c-0.25,-0.17 1.5,-1.71 1.5,-1.71zM3.92,4.12117c-0.15,0.41 0,0.8 0.5,1c0.38,0.16 0.94,0.11 1.24,-0.19c0.38,-0.36 0.5,-0.81 1.51,-1.63c1,-0.82 1.24,-0.82 1.74,-1.19c0.36,-0.24 0.29,-0.6 0,-0.9c-0.37,-0.39 -0.91,-0.40001 -1.5,-0.19001c-0.24,0.11 -1.12,0.46001 -2,1.28001c-0.88,0.81 -1.38,1.46 -1.49,1.82z',
                width: 20,
                length: '130%',
                offsetCenter: ['0%', '65%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4,

                }
            },
            anchor: {
                show: false,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: value => {
                    let realValue = value;
                    if (value > 90) realValue -= 180;
                    if (value > 270) realValue = -180 + realValue;
                    return realValue + "°"
                }
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 20,
                    name: '水下俯仰角'
                }
            ]
        },
    ]
};

let rollUpOption = {
    animationDurationUpdate: 300,
    series: [
        {
            name: 'roll',
            type: 'gauge',
            startAngle: 0,
            endAngle: 360,
            min: -180,
            max: 180,
            splitNumber: 18, // 18,
            clockwise: false,
            axisLine: {
                lineStyle: {
                    width: 2
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value > 60 && value < 120) return
                    if (value < -60 && value > -120) return
                    if (value <= -120) return value + 180
                    if (value >= 120) return value - 180
                    return value;
                }
            },
            pointer: {
                show: true,
                icon: 'path://M42.85,50.92h-5.65v8.56h8.75v0.36h27.54v-5.1c0,0 5.21,0.33 8.02,1.82c2.81,1.5 6.02,5.1 6.02,5.1c0,0 -3.57,4.08 -6.38,5.47c-2.81,1.38 -7.66,1.45 -7.66,1.45v-5.1h-27.54v0.37h-8.75v20.4c0,0 -0.03,0.55 -0.15,1.22l-0.01,2.34l4.69,8.01l-0.31,0.18l-4.38,-7.47l-0.02,5.19h-0.37l0.03,-5.81l-0.3,-0.51c-0.04,0.06 -0.08,0.1 -0.12,0.15c-0.81,0.8 -3.08,0.7 -3.08,0.7c0,0 0,-1.17 -1.41,-1.17c-1.42,0 -8.74,-0.71 -8.74,-0.71c0,0 -9.92,-0.47 -12.04,-4.01c-2.57002,-4.26 -2.60002,-16.73 -2.60002,-16.73v-5.07l-4.19999,-9.83v-1.82h-4.19001v-2.18h4.19001v-2.01l4.19999,-9.5v-3.77c0,0 0.48001,-14.62 2.60002,-18.38c2.12,-3.77 12.04,-4.01 12.04,-4.01c0,0 7.56,-0.47 8.74,-0.47c1.18,0 1.41,-1.18 1.41,-1.18c0,0 2.29,-0.21 3.08,0.47c0.07,0.07 0.14,0.15 0.2,0.24l0.54,-0.88l0.02,-5.33l0.37,0.01l-0.02,4.72l4.05,-6.64l0.31,0.19l-4.37,7.16l-0.03,9.57c1.34,0.14 4.38,0.57 5.89,1.57c1.97,1.31 3.28,3.1 3.28,4.92c0,1.82 -1.29,3.42 -3.28,4.74c-1.64,1.08 -4.65,1.36 -5.95,1.43l-0.02,6.22h86.75v3.64h-86.76l-0.03,5.65h5.64v1.27h1.64c0,0 1.1,0.37 1.1,1.64c0,1.28 -1.1,1.64 -1.1,1.64h-1.64zM36.99,9.53l0.01,-1.58l-0.33,0.54c0.14,0.31 0.24,0.68 0.32,1.04zM36.68,87.19v-0.34c-0.03,0.07 -0.06,0.13 -0.09,0.2z',
                width: 70,
                length: '100%',
                offsetCenter: ['20%', '50%'],
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: false,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#ffc943',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: [0, '50%'],
                // shadowColor: 'rgba(0, 0, 0, 1)',
                // shadowOffsetX: 1,
                // shadowOffsetY: 2,
                // shadowBlur: 2,
                formatter: value => {
                    let realValue = value;
                    if (value > 90) realValue -= 180;
                    if (value > 270) realValue = -180 + realValue;
                    return realValue + "°"
                }
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 20,
                    name: '水面横滚角'
                }
            ]
        },
    ]
};

let capacitorOption = {
    animationDurationUpdate: 300,
    grid: {
        top: '0%',
        bottom: '10%',
        left: '10%',
        right: '10%',
    },
    series: [
        {
            name: 'capacitor',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 100,
            splitNumber: 8, // 18,
            clockwise: true,
            progress: {
                show: true,
                width: 8,
                itemStyle: {
                    color: '#ffc943'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 7,
                    color: [[1, 'rgba(0,0,0,.1)']],
                    // opacity: 1
                }
            },
            axisTick: {
                show: false,
                distance: 1,
                length: 3,
            },
            splitLine: {
                show: false,
                length: 6,
                distance: 0,
                lineStyle: {
                    width: 2,
                    color: '#fff'
                }
            },
            axisLabel: {
                show: false,
                fontSize: 9, // 刻度
                distance: 7,
                color: '#fff',
                formatter: function (value) {
                    if (value === 360) return;
                    return value;
                }
            },
            detail: {
                valueAnimation: true,
                fontSize: 30,
                color: '#fff',
                offsetCenter: [0, "5%"],
                formatter: "{value}%"
            },
            pointer: {
                show: false
            },
            data: [
                {
                    title: {
                        color: '#eee',
                        offsetCenter: [0, '120%'],
                        fontSize: 14,
                        textShadowColor: 'rgba(0, 0, 0, 0.7)',
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 2,
                    },
                    value: 0,
                    name: '电池电量'
                }
            ]
        },
    ]
};

// var speedChart = echarts.init(document.getElementById('speed'));
// speedChart.setOption(speedOption);

var rudderAngleChart = echarts.init(document.getElementById('rudderAngle'));
rudderAngleChart.setOption(rudderAngleOption);

// var courseChart = echarts.init(document.getElementById('course'));
// courseChart.setOption(courseOption);

var headingUpChart = echarts.init(document.getElementById('headingUp'));
headingUpChart.setOption(headingUpOption);

var headingDownChart = echarts.init(document.getElementById('headingDown'));
headingDownChart.setOption(headingDownOption);

var pitchUpChart = echarts.init(document.getElementById('pitchUp'));
pitchUpChart.setOption(pitchUpOption);
var pitchDownChart = echarts.init(document.getElementById('pitchDown'));
pitchDownChart.setOption(pitchDownOption);

var rollUpChart = echarts.init(document.getElementById('rollUp'));
rollUpChart.setOption(rollUpOption);

// var capacitorChart = echarts.init(document.getElementById('capacitor'));
// capacitorChart.setOption(capacitorOption);

/**
 * 设置右侧状态窗口数据
 * @param boat
 */
function setStatus(boat) {
    // title
    $('.right>.row>.title>span').html(boat.name + ' ' + boat.code + ' 状态数据')

    // 数据时间
    let status = boat.statusList[boat.statusList.length - 1]
    let dataTimeHtml = " - "
    if (status.time) {
        if (status.time instanceof Date) {
            dataTimeHtml = status.time.Format('yyyy-MM-dd HH:mm:ss')
        } else {
            dataTimeHtml = status.time
        }
    }
    $('#data-time').html(dataTimeHtml)

    // 流水号
    $('#serial-num').html(status.serialNum)

    // 图表

    // speedOption.series[0].data[0].value = status.speed.toFixed(2)
    // speedChart.setOption(speedOption)
    $('#speed').html(status.speed.toFixed(2) + "m/s");


    rudderAngleOption.series[0].data[0].value = status.rudderAngle
    if (typeof rudderAngleChart !== "undefined") rudderAngleChart.setOption(rudderAngleOption)
    $("#rudderAngle").attr("title", "舵角 " + status.rudderAngle + "°")

    // courseOption.series[0].data[0].value = status.course
    // courseChart.setOption(courseOption)

    headingUpOption.series[0].data[0].value = status.headingUp
    if (typeof headingUpChart !== "undefined") headingUpChart.setOption(headingUpOption)
    $("#headingUp").attr("title", "水面艏向 " + status.headingUp + "°")

    headingDownOption.series[0].data[0].value = status.headingDown
    if (typeof headingDownChart !== "undefined") headingDownChart.setOption(headingDownOption)
    $("#headingDown").attr("title", "水下艏向 " + status.headingDown + "°")

    pitchUpOption.series[0].data[0].value = status.pitchUp
    if (typeof pitchUpOption !== "undefined") pitchUpChart.setOption(pitchUpOption)
    $("#pitchUp").attr("title", "水面俯仰角 " + status.pitchUp + "°")

    pitchDownOption.series[0].data[0].value = status.pitchDown
    if (typeof pitchDownChart !== "undefined") pitchDownChart.setOption(pitchDownOption)
    $("#pitchDown").attr("title", "水下俯仰角 " + status.pitchDown + "°")

    rollUpOption.series[0].data[0].value = status.rollUp
    if (typeof rollUpChart !== "undefined") rollUpChart.setOption(rollUpOption)
    $("#rollUp").attr("title", "水面横滚角 " + status.rollUp + "°")


    // 电量
   /* var capacitor = Math.round(status.capacitor * 100);
    // capacitorOption.series[0].data[0].value = capacitor
    if (capacitor > 30) {
        $('#capacitor').css('color', 'rgb(32 244 32)');
        // capacitorOption.series[0].progress.itemStyle.color = '#29b429'
    } else if (capacitor <= 30 && capacitor > 10) {
        $('#capacitor').css('color', 'rgb(255 174 21)');
        // capacitorOption.series[0].progress.itemStyle.color = '#ffc943'
    } else {
        $('#capacitor').css('color', 'rgb(255 73 73)');
        // capacitorOption.series[0].progress.itemStyle.color = '#de1616'
    }
    $('#capacitor').html(capacitor + "%");*/
    // capacitorChart.setOption(capacitorOption)

    // for (let key of ['voltage1', 'voltage2', 'voltage3']) {
    //     let arr = boat.statusList.map(s => s[key].toFixed(2))
    //     $("#" + key).sparkline(arr, sparklineOption);
    //     $("#" + key).parent().find('.val').html(arr[arr.length - 1] + 'V');
    // }

    $('#capacitor').css('color', 'rgb(32 244 32)');
    $('#capacitor').html(status.voltage1.toFixed(2) + "V");
    // 点击转速
    let engine = ""
    if (status.voltage2 == 0) engine = '关 关'
    if (status.voltage2 == 1) engine = '关 低速'
    if (status.voltage2 == 2) engine = '关 高速'
    if (status.voltage2 == 16) engine = '开 关'
    if (status.voltage2 == 17) engine = '开 低速'
    if (status.voltage2 == 18) engine = '开 高速'
    $('#engine').html(engine)
    $('#engine').attr('title', status.voltage2)

    // 经纬度
    $('#lng').html(toDegrees(status.lng))
    $('#lng').attr('title', status.lng)
    $('#lat').html(toDegrees(status.lat))
    $('#lat').attr('title', status.lat)

    // 旋转圈数
    $('#rotationUp').html(status.rotationUp)
    $('#rotationDown').html(status.rotationDown)

    // 水下俯仰和舵角
    // $('#headingDown').html(status.headingDown + '°')
    // $('#pitchDown').html(status.pitchDown + '°')

    // 水下受力
    $('#pressure').html(status.pressure + 'kg')

    // 通信模式
    $('#db-mode').html(bdModeTypeDatas.find(dict => dict.dictValue == boat.bdMode).dictLabel)

    $('#rotationMode').html(status.rudderAngle == '130' ? "右舵" : status.rudderAngle == '30' ? "左舵" : "正舵" )
    // 控制模式
    $('#controlMode').html(status.controlMode == 1 ? '手动' : '自动')
    // $('#switch').prop('checked', status.controlMode === 1)

    // 跑偏半径
    let radius = '-';
    if (boat.radius != null) radius = boat.radius + '米';
    $('#radius').html(radius)

    // 通信率 不需要显示
    if (boat.statistic) {
        if (boat.statistic.msgAll) $('#msg-rate').html(Math.round(boat.statistic.msgReceived / boat.statistic.msgAll * 100) + '%')
        if (boat.statistic.msgStay) $('#stay-rate').html(Math.round(boat.statistic.msgStayIn / boat.statistic.msgStay * 100) + '%')
    }

    // 显示leftNav里船的状态
    // $(`#nav > li`).each(function () {
    //     let code = $(this).data('code')
    //     if (code === boat.code) {
    //         $(this).find('cite').attr('class', 'status-' + getColorByStatus(boat.status));
    //     }
    // })
    setDeviceIconColor(status.boatCode, status.loadStatus)
    let loadBitStr = (status.loadStatus >>> 0).toString(2).padStart(8,'0').split('').reverse().join('');
    $("#load_atmos").html(loadBitStr.charAt(0) == '0'?'关':'开');
    $("#load_radar").html(loadBitStr.charAt(1) == '0'?'关':'开');
    $("#load_wave").html(loadBitStr.charAt(2) == '0'?'关':'开');
    $("#load_adcp").html(loadBitStr.charAt(3) == '0'?'关':'开');
    $("#load_ctd").html(loadBitStr.charAt(4) == '0'?'关':'开');
    $("#load_water_quality").html(loadBitStr.charAt(5) == '0'?'关':'开');
    $("#load_uac").html(loadBitStr.charAt(6) == '0'?'关':'开');
    // 显示报警 开关量
    setSwitchAlert(boat.alertList)
}

/**
 *  设置设备图标颜色
 *
 * 0：大气波导 2
 * 1：测风雷达 3
 * 2：波浪仪 4
 * 3：ADCP 5
 * 4：CTD 6
 * 5：水质传感器 7
 * 6：通信机 8
 * 7: 预留
 * @param code
 * @param state
 */
function setDeviceIconColor(code, state) {
    let stateStr = state.toString(2)
    while (stateStr.length < 8) {
        stateStr = '0' + stateStr
    }
    // console.log(code, state, stateStr)

    let deviceTypes = [2, 3, 4, 5, 6, 7, 8] // 对应的deviceType
    for (let i = 0; i < deviceTypes.length; i++) {
        let deviceState = parseInt(stateStr.substring(i, i + 1))
        // console.log(i, deviceState)
        $(`#nav li[data-code='${code}'] a[data-type='${deviceTypes[i]}'] cite`).attr('class', 'status-' + getLoadColor(deviceState))
    }
    $(`#nav li[data-code='${code}'] a[data-type='0'] cite`).attr('class', 'status-green') // 气象站
    $(`#nav li[data-code='${code}'] a[data-type='1'] cite`).attr('class', 'status-green') // AIS
}

/**
 * 设置开关量
 * @param alertList
 */
function setSwitchAlert(alertList) {
    let alertTitles = []
    if (alertList) {
        for (let i = 0; i < alertList.length; i++) {
            let alert = alertList[i];
            if (alert.status) alertTitles.push(getAlertTitle(alert));
        }
    }

    if (alertTitles.length === 0) {
        $('#alert>.light').attr('class', 'light light-green')
        $('#alert>.light').removeAttr('title')
        $('#alert>.light').html('');
    } else {
        $('#alert>.light').attr('class', 'light light-red')
        $('#alert>.light').attr('title', alertTitles.join("\n"))
        $('#alert>.light').html('<i class="fa fa-exclamation"></i>');
    }

}

function getAlertTitle(alert) {
    let title = ""
    if (alert.type === 0) { // 开关量
        let alertBitType = alertBitTypeDatas.find(dict => dict.dictValue == alert.bitType) // 不能改成===
        title = alertBitType.dictLabel
    } else {
        title = alertTypeDatas.find(dict => dict.dictValue == alert.type).dictLabel
    }
    return title;
}

/**
 * 收到报警
 * @param alert
 */
function alertGot(alert) {
    // 更新boat里的alert这样下次打开状态窗口的时候可以正确显示
    let boat = getBoatByCode(alert.boatCode)
    if (!boat) return;
    if (!boat.alertList || boat.alertList.length === 0) return;
    let a = boat.alertList.find(alertInList => {
        return alertInList.id === alert.id || (alertInList.type === alert.type && alertInList.bitType === alert.bitType)
    })   // 找到报警。id一样 或者类型一样，有可能重新设置了，所以id不一样了
    a.status = alert.status;

    // 改变界面状态灯颜色
    if (!rightDivShown) return;
    if (rightDivCode !== alert.boatCode) return;
    setSwitchAlert(boat.alertList);
}

let sparklineOption = {
    type: 'line',
    width: '100%',
    height: '100%',
    lineColor: '#fff',
    fillColor: 'transparent'
}